<template>
  <BaseMainSlot :show-search-box="!nowChanceStau" :show-tab="false" :show-btn-box="false" @richheight="richheight">
    <template v-slot:search-box v-if="!nowChanceStau">
      <SearchForm :formConfig="formConfig" :formData="searchlist" @search="search"
        @batchstaumet="batchstaumet" @getpingzghong="getpingzghong"></SearchForm>
    </template>
    <template v-slot:table-box>
      <!-- 展示和删除 -->
      <div v-if="nowChanceStau === '' || nowChanceStau === 'del'" style="height: 100%; width: 100%">
        <div class="cardlist">
          <!-- :class="{'cardselect':index===nowclickindex} " -->
          <div
            v-for="(item, index) in tableData"
            :key="index"
            class="card"
            @click="clickcard(item, index)"
          >
            <div class="card-title">
              <img src="~@/assets/pest-knowledge/icon-arrow.png" alt="">
              <span> {{ item.title }} </span>
            </div>
            <!-- <div class="card-date">
              <i class="el-icon-user-solid"></i>
              {{ item.userName }}
              <i class="el-icon-s-comment"></i>
              {{ item.quantity }} 条
            </div> -->
            <!-- <el-checkbox class="zhcheckbox" :value="nowselectedListtwoshow[index]" @change="checkboxchange($event,index)" :style="{'background-image':`url(${imageurlmet(index)})`}" /> -->
            <!-- <div class="card-pest" ></div> 时间：{{ item.timestamp }}  -->
            <div class="ql-editor">
              <div class="editorContent" v-html="item.content"></div>
              <div class="info">发表人：{{ item.userName }}</div>
              <div class="info">
                <span>浏览量：{{ item.readingVolume }}</span>
                <span>点赞：{{ item.likesNumber }}</span>
                <span>评论：{{ item.quantity }}</span>
              </div>
            </div>
          </div>
        </div>
        <Pagination
          :page-size="pageSize"
          :current-page="currentPage"
          :total-size="totalSize"
          @changePageSize="changePageSize"
          @changeCurrentPage="changeCurrentPage"
        />
      </div>
      <!-- 新建和修改 -->
      <div
        v-if="nowChanceStau === 'edit' || nowChanceStau === 'add'"
        ref="zongflag"
        style="width: 100%; height: 100%; overflow-y: auto"
      >
        <div class="zhform">
          <div v-if="nowChanceStau === 'edit' || nowChanceStau === 'add'"
            class="toback btndefault" @click="nowChanceStau = ''">
            <div class="btn">
              <img src="~@/assets/fh.png" alt />
              <span>返回</span>
            </div>
          </div>
        </div>
        <div class="ql-container ql-snow">
          <div class="ql-title">{{ title }}</div>
          <div class="ql-editor" v-html="content">
            <!-- {{ content }} {{ editorOption }} -->
            <!-- <quill-editor :style="{'height':richtextheight+'px','width':'100%'}" enable="false" :content="content" :options="editorOption" @change="onEditorChange($event)" /> -->
          </div>
          <div class="handlesanlian">
            <div class="user">
              <div class="info">
                <span>浏览量：{{ readingVolume }}</span>
                <span>点赞：{{ likeNumbers }}</span>
              </div>
              <div class="info">发表人：{{ userName }}</div>
              <div class="info">发表日期：{{ createTime }}</div>
            </div>
            <div class="right">
              <div class="readNumber">
                <div class="iconfont zktdyueduxiao"></div>
                <div>{{ readingVolume }}</div>
              </div>
              <div class="dianzan">
                <div
                  :class="
                    thumbUp ? 'iconfont zktddianzan_kuai disabled' : 'iconfont zktddianzan'
                  "
                  @click="thumbUpf"
                ></div>
                <div>{{ likeNumbers }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="zhforms">
          <div class="zhforms-title">
            <img src="~@/assets/pest-knowledge/icon-arrow.png" alt="">
            <span> 发布评论 </span>
          </div>
          <div class="zhforms-input">
            <el-input v-model="textarea" type="textarea" placeholder />
            <!-- <el-button class="table-btns edit-btns" @click="knowleSubmit(0, {})">发布</el-button> -->
            <div class="table-btns edit-btns" @click="knowleSubmit(0, {})">
              <img src="~@/assets/pest-knowledge/fabu.png" alt="">
            </div>
          </div>
          <div class="zhforms-title">
            <!-- <b>|</b> -->
            <img src="~@/assets/pest-knowledge/icon-arrow.png" alt="">
            <span> 全部评论 {{ knowletotalSize }} 条 </span>
          </div>
          <!-- <e0 -->
          <div v-for="(o, index) in knowletableData" :key="index" class="zhforms-list">
            <span class="zhforms-name">{{ o.userName }}:</span>
            <span class="zhforms-content">{{ o.comments }}</span>
            <br />

            <span class="zhforms-ads">{{ o.releaseTime }} {{ o.homeAddress }}</span>
            <el-button type="text" @click="knowletao(o, index)">回复</el-button>
            <el-button
              v-if="
                knowletaoIndex !== '' &&
                  knowletaoe !== '' &&
                  knowletaoIndex === index
              "
              type="text"
              @click="knowletao({ knowledgeBaseCommentsNo: '' }, '')"
            >取消</el-button>
            <el-button
              v-if="o.quantity > 0"
              type="text"
              @click="knowleSearch(o, index)"
            >{{ o.children === undefined ? "展开回复" : "收起回复" }}</el-button>
            <div
              v-if="
                index === knowletaoIndex &&
                  o.knowledgeBaseCommentsNo === knowletaoe
              "
              class="zhforms-input"
            >
              <el-input v-model="textareas" type="textarea" placeholder />
              <!-- <el-button class="table-btns edit-btns" @click="knowleSubmit(1, o, index)">发布</el-button> -->
              <div class="table-btns edit-btns" @click="knowleSubmit(1, o, index)">
                <img src="~@/assets/pest-knowledge/fabu.png" alt="">
              </div>
            </div>
            <!-- <transition name="fades-transform"> -->
            <div v-if="o.children !== undefined && o.children.length > 0" class="zhforms-list-box">
              <div v-for="(item, cindex) in o.children" :key="cindex" class="zhforms-list">
                <span class="zhforms-name">{{ item.userName }}:</span>
                <span class="zhforms-content">
                  <span v-if="item.parentUserName">
                    <span style="color: #fff">回复</span>
                    {{ item.parentUserName }}
                  </span>
                  {{ item.comments }}
                </span>
                <br />
                <span class="zhforms-ads">{{ item.releaseTime }} {{ item.homeAddress }}</span>
                <el-button type="text" @click="knowletao(item, cindex + 9999999)">回复</el-button>
                <el-button
                  v-if="
                    knowletaoIndex !== '' &&
                      knowletaoe !== '' &&
                      knowletaoIndex === cindex + 9999999
                  "
                  type="text"
                  @click="knowletao({ knowledgeBaseCommentsNo: '' }, '')"
                >取消</el-button>
                <div
                  v-if="
                    cindex + 9999999 === knowletaoIndex &&
                      item.knowledgeBaseCommentsNo === knowletaoe
                  "
                  class="zhforms-input"
                >
                  <el-input v-model="textareas" type="textarea" placeholder />
                  <!-- <el-button
                    type="text"
                    class="table-btns edit-btns"
                    @click="knowleSubmit(1, item, index, o)"
                  >发布</el-button> -->
                  <div class="table-btns edit-btns" @click="knowleSubmit(1, item, index, o)">
                    <img src="~@/assets/pest-knowledge/fabu.png" alt="">
                  </div>
                </div>
              </div>
            </div>
            <!-- </transition> -->
          </div>

          <Pagination
            :page-size="knowlepageSize"
            :current-page="knowlecurrentPage"
            :total-size="knowleTotalSize"
            @changePageSize="knowlechangePageSize"
            @changeCurrentPage="knowlechangeCurrentPage"
          />
        </div>

        <!-- <quill-editor ref="myTextEditor" v-model="content" :options="editorOption" style="height:600px;" /> -->
      </div>
    </template>
  </BaseMainSlot>
</template>
<script>
// import ActionBar from "@/components/ActionBar";
import SearchForm from '@/components/searchForm';
import Pagination from "@/components/Pagination";
import BaseMainSlot from "@/components/BaseMainSlot/newBaseMainSlot.vue";
import { mymixin } from "@/utils/mixin";
import nowpagereqs from "@/api/basic-info-manage/agricultural-type-manage";
import nowpagereq from "@/api/basic-info-manage/pest-knowledge-management";
import zhongyangleibie from "@/api/basic-info-manage/category-management/index";
import zhongyangpizhong from "@/api/basic-info-manage/breed-varieties-management/index";
// 引入富文本编辑器样式及组件
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
// import { quillEditor } from 'vue-quill-editor';
import { getToken } from "@/utils/auth";
// import SelectButton from "@/components/selectbutton/index.vue";

export default {
  name: "PestKnowledgeBase",
  components: {
    // ActionBar,
    // quillEditor,
    SearchForm,
    Pagination,
    BaseMainSlot,
    // SelectButton
  },
  mixins: [mymixin],
  data() {
    return {
      formConfig: [
        {
          label: '种养方式',
          prop: 'selectWays',
          type: 'select',
          change: 'batchstaumet',
          options: [
            { name: "大田种植", value: "dt", index: 0 },
            { name: "水产养殖", value: "sc", index: 1 },
            { name: "大棚种植", value: "dp", index: 2 },
            { name: "畜牧养殖", value: "xm", index: 3 }
          ],
          optionKey: { label: 'name', value: 'index' },
        }, {
          label: '标题名称',
          prop: 'title',
          type: 'input',
        }, {
          label: '种养类别',
          prop: 'selectplantlist',
          type: 'cascader',
          change: 'getpingzghong',
          options: [], // plantTypelList
          optionKey: {
            expandTrigger: 'hover',
            value: 'plantTypeNo',
            children: 'children',
            label: 'plantTypeName',
            checkStrictly: true
          },
        }, {
          label: '种养品种',
          prop: 'plantVarietyNo',
          type: 'select',
          options: [], // nowvarietyList
          optionKey: { label: 'plantVarietyName', value: 'plantVarietyNo' },
        }
      ],
      thumbUp: false,
      readingVolume: "",
      likeNumbers: "",
      // 文章点赞相关
      diseasesPestsInfoNo: "",
      selectWays: 0,
      searchlist: {
        selectWays: 0
      },
      // 种养品种列表
      plantTypelList: [],
      nowplantTypeName: "",
      selectplantlist: [],
      // 种养类别列表
      nowvarietyList: [],
      plantVarietyId: "",
      textarea: "",
      textareas: "",
      // 背景图地址列表
      imageurllist: [
        { id: 1, url: "pest1.png" },
        { id: 2, url: "pest2.png" },
        { id: 3, url: "pest3.png" }
      ],
      // 当前选择状态管理
      nowselectedList: [],
      // 当前选中id管理
      nowselectedListtwo: [],
      nowselectedListtwoshow: [],
      // 当前点击的知识库index
      nowclickindex: "",
      // 当前点击的知识库id
      nowclickid: "",
      // 标题
      title: "",
      // 富文本内容
      richtextheight: "",
      content: "",
      editorOption: {
        placeholder: "编辑知识库文章"
      },
      buttonselectlist: [
        { name: "大田种植", value: "dt" },
        { name: "水产养殖", value: "sc" },
        { name: "大棚种植", value: "dp" },
        { name: "畜牧养殖", value: "xm" }
      ],
      curTabIndex: 0,
      plantVarietyName: "",
      knowletableData: [],
      knowletotalSize: 0,
      knowleTotalSize: 0,
      knowlepageSize: 10,
      knowlecurrentPage: 1,
      knowletaoe: "",
      knowletaoIndex: "",
      props: {
        label: "userName",
        children: "child",
        isLeaf: "leaf"
      }
    };
  },
  computed: {},
  watch: {
    nowChanceStau(newval) {
      // 当状态为删除的时候触发删除方法---另外的删除修改添加，通过点击保存，调用方法来实现
      if (newval === "add") {
        this.content = "";
        this.title = "";
        this.editorOption = {
          placeholder: "编辑知识库文章"
        };
      }
      this.thumbUp = false;
    }
  },
  created() {},
  mounted() {
    this.getTableDataList();
    this.getselectdatalist();
  },
  methods: {
    batchstaumet(param) {
      console.log(param)
      this.curTabIndex = param.selectWays;
      this.search();
      this.getselectdatalist();
    },
    search() {
      this.currentPage = 1;
      this.getTableDataList();
    },
    // 是否选择展示方法
    showselectbox(index) {
      // console.log(index)
      if (
        this.nowselectedListtwo[index] === this.tableData[index].knowledgeBaseId
      ) {
        return true;
      } else {
        return false;
      }
    },
    // 获取下拉框数据
    getselectdatalist() {
      // 获取种养类别列表
      nowpagereqs
        .getbaseFarmingTypeList({
          page: 1,
          size: 100,
          entity: { organizationNo: sessionStorage.organizationNo }
        })
        .then(res => {
          this.loadingtwo = false;
          if (res.code === 0) {
            this.$message.error("所有农业类型表格获取失败");
          }
          console.log("a", res);
          let data = res.data;
          // 赋值总条数
          this.totalSizetwo = data.totalElements;
          // 赋值数组
          this.buttonselectlist = [];
          data.content.forEach(item => {
            this.buttonselectlist.push({
              name: item.farmingTypeName,
              value: item.farmingTypeNo
            });
          });
        });
      // 获取种养类别树状表
      zhongyangleibie
        .getcategoryTreeTwo(this.buttonselectlist[this.curTabIndex].value)
        .then(res => {
          let list = res.data;
          this.plantTypelList = list;
          this.formConfig[2].options = list;
        });
    },
    // 循环过滤树形数组
    filterTreeKey(arr) {
      let newArr = [];
      newArr = arr?.map(item => {
        if (item.children?.length > 0) {
          item = {
            ...item,
            child: this.filterTreeKey(item.children)
          };
        } else {
          delete item.child;
        }
        return item;
      });
      newArr = newArr?.filter(item => item != null);
      return newArr;
    },
    // 获取虫情知识库内容
    getTableDataList() {
      console.log(this.buttonselectlist)
      console.log(this.curTabIndex)
      let params = {
        size: this.pageSize,
        page: this.currentPage,
        entity: {
          ...this.searchlist,
          farmingTypeNo: this.buttonselectlist[this.curTabIndex].value
        }
      };
      nowpagereq.getKnowledgeBaseList(params).then(res => {
        if (res.code === 0) {
          this.$message.error("查询失败");
        }
        let data = res.data;
        // 赋值总条数
        this.totalSize = data.totalElements;
        // 赋值数组
        this.tableData = data.content;
        // 赋值默认选择
        this.nowselectedList = [];
        this.tableData.forEach((item, index) => {
          // 管理状态
          this.nowselectedList.push(false);
          // 管理数据
          this.nowselectedListtwo.push("zh");
          this.nowselectedListtwoshow.push(false);
        });
        this.resetActionBar();
      });
    },
    getknowleDataList() {
      let params = {
        size: this.knowlepageSize,
        page: this.knowlecurrentPage,
        entity: {
          ...this.searchlist,
          parentNo: 0,
          farmingTypeNo: this.buttonselectlist[this.curTabIndex].value,
          // diseasesPestsInfoNo:
          diseasesPestsInfoNo: this.nowclickid
        }
      };
      nowpagereq.getknowleBaseList(params).then(res => {
        if (res.code === 0) {
          this.$message.error("查询失败");
        }
        let data = res.data;
        // 赋值总条数
        this.knowleTotalSize = data.totalElements;
        // 赋值数组
        this.knowletableData = data.content;
      });
    },
    knowletao(e, x) {
      this.knowletaoe = e.knowledgeBaseCommentsNo;
      this.knowletaoIndex = x;
      this.textarea = "";
      this.textareas = "";
    },
    knowleSubmit(e, x, index, o) {
      if (e === 0) {
        nowpagereq
          .addKnowledgelist({
            comments: this.textarea,
            account: sessionStorage.account,
            parentNo: 0,
            diseasesPestsInfoNo: this.nowclickid
          })
          .then(res => {
            if (res.code === 1) {
              this.getknowleDataList();
              this.textarea = "";
              this.$message.success("发布成功");
            } else {
              this.$message.error(res.msg || "发布失败");
            }
          });
      } else if (e === 1) {
        nowpagereq
          .addKnowledgelist({
            comments: this.textareas,
            account: sessionStorage.account,
            parentNo: x.knowledgeBaseCommentsNo,
            parentUserName: x.parentNo === "0" ? undefined : x.userName,
            diseasesPestsInfoNo: this.nowclickid
          })
          .then(res => {
            if (res.code === 1) {
              this.knowleSearch(o || x, index, 2);
              this.textareas = "";
              this.knowletao({ knowledgeBaseCommentsNo: "" }, "");
              this.$message.success("发布成功");
            } else {
              this.$message.error(res.msg || "发布失败");
            }
          });
      }
    },
    knowleSearch(e, index, x) {
      if (this.knowletableData[index].children === undefined || x === 2) {
        nowpagereq.SearchKnowledgelist(e.knowledgeBaseCommentsNo).then(res => {
          if (res.code === 1) {
            this.$set(this.knowletableData[index], "children", res.data);
            // this.$message.success("查询成功");
          } else {
            this.$message.error(res.msg || "查询失败");
          }
        });
      } else {
        this.$set(this.knowletableData[index], "children", undefined);
      }
    },
    // v3/template/knowledgeBaseComments/queryPageByCondition
    // 多选框选择方法
    checkboxchange(e, index) {
      // console.log(e)
      if (e === true) {
        this.nowselectedListtwo[index] = this.tableData[index].knowledgeBaseId;
        this.nowselectedListtwoshow[index] = true;
      } else {
        this.nowselectedListtwoshow[index] = false;
        this.nowselectedListtwo[index] = "zh";
      }
      this.nowselectedListtwo.forEach(item => {
        if (item !== "zh") {
          this.delActive = true;
        }
      });
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.getTableDataList();
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.getTableDataList();
    },
    knosearch() {
      this.knowlecurrentPage = 1;
      this.getknowleDataList();
    },
    knowlechangePageSize(pageSize) {
      this.knowlepageSize = pageSize;
      this.getknowleDataList();
    },
    knowlechangeCurrentPage(currentPage) {
      this.knowlecurrentPage = currentPage;
      this.getknowleDataList();
    },
    // 图片地址返回方法
    imageurlmet(index) {
      let zilon = index % 3;
      let ukl = this.imageurllist[zilon]["url"];
      let ull = require(`@/assets/pest-knowledge/${ukl}`);
      // console.log(ull);
      // require 只接收一个动态值会报警告
      // return require(`@/assets/pest-knowledge/${ukl}`)
      return ull;
    },
    // 富文本高度自适应
    richheight(e) {
      if (e > 0) {
        this.richtextheight = e;
      } else {
        this.richtextheight = 100;
      }
    },
    // 富文本修改
    onEditorChange({ editor, html, text }) {
      this.content = html;
    },
    // 点击卡片方法
    async clickcard(e, ide) {
      this.nowclickindex = ide;
      this.nowclickid = e.diseasesPestsInfoNo;
      this.title = e.title;
      this.editActive = true;
      this.plantVarietyNo = e.plantVarietyNo;
      this.knowletotalSize = e.quantity;
      this.diseasesPestsInfoNo = e.diseasesPestsInfoNo;
      this.createTime = e.createTime;
      // this.getpingzghongname(e.plantTypeNo)
      // this.getvarriety(e.plantVarietyId)

      let result = await nowpagereq.getArticalReads(this.diseasesPestsInfoNo);
      let data = result.data || {};
      this.content = data.content;
      this.likeNumbers = data.likesNumber;
      this.readingVolume = data.readingVolume;
      this.content = data.content;
      this.userName = data.userName
      this.getvarriety(e.plantVarietyNo);
      this.knosearch();
      this.nowChanceStau = "edit";
      // this.getArticalReads()
    },
    // 通过种养类别id查品种
    getpingzghong(searchlist) {
      // alert("e")
      this.searchlist = searchlist
      let params = {
        plantTypeNo: this.searchlist.selectplantlist[this.searchlist.selectplantlist.length - 1]
      };
      console.log(params)
      zhongyangpizhong.querybycondition(params).then(res => {
        this.nowvarietyList = res.data;
        this.formConfig[3].options = res.data;
      });
    },
    // 通过种养类别id查种养名称
    getpingzghongname(id) {
      let params = {
        plantTypeNo: id
      };
      zhongyangleibie.querybycondition(params).then(res => {
        this.nowplantTypeName = res.data[0].plantingTypeName;
      });
    },
    // 正则过滤富文本
    richTextFormat(value) {
      // value = value.replace(/<\/?[^>]*>/g,'')
      value = value.replace(/<\/?.+?>/g, "");
      value = value.replace(/\s+/g, "");
      if (value.length > 30) {
        return value.slice(0, 30) + "...";
      }
      return value;
    },
    // 通过种养品种id查品种name
    getvarriety(plantVarietyNo) {
      let params = {
        plantVarietyNo: plantVarietyNo
      };
      zhongyangpizhong.querybycondition(params).then(res => {
        this.plantVarietyName = res.data[0]?.plantVarietyName;
      });
    },
    // 删除方法
    delmessage() {
      if (this.nowChanceStau === "del") {
        let zilonglist = this.nowselectedListtwo.map(item => {
          if (item !== "zh") {
            return item;
          }
        });
        nowpagereq.delKnowledgeBaselist(zilonglist).then(res => {
          if (res.code === 1) {
            this.getTableDataList();
            this.$message.success("删除成功");
          } else {
            this.$message.error("删除失败");
          }
        });
      }
    },
    save() {
      let params = {
        // 种养品种id
        // 种养类别id
        plantVarietyId: this.searchlist.selectplantlist[this.searchlist.selectplantlist.length - 1],
        plantTypeNo: this.plantVarietyId,
        organizationNo: getToken("organizationNo"),
        farmingTypeNo: getToken("farmingTypeNo"),
        richText: this.content,
        title: this.title
        // pest-equipment-management
        // varietiyTypeName: ""
        // "plantTypeNo": 0,//种养类别id暂时不填
        // "plantingVarietyId": 0,//种养品种
        // "plantingVarietyName": "",
      };
      if (this.nowChanceStau === "add") {
        nowpagereq.addKnowledgeBaselist(params).then(res => {
          if (res.code === 1) {
            this.getTableDataList();
            this.nowChanceStau = "";
            this.$message.success("添加成功");
          } else {
            this.$message.error("添加失败");
          }
        });
      } else if (this.nowChanceStau === "edit") {
        params.knowledgeBaseId = this.nowclickid;
        nowpagereq.editKnowledgeBaselist(params).then(res => {
          if (res.code === 1) {
            this.getTableDataList();
            this.nowChanceStau = "";
            this.$message.success("修改成功");
          } else {
            this.$message.error("修改失败");
          }
        });
      }
    },
    // 点赞文章
    thumbUpf() {
      nowpagereq.likeArtical(this.diseasesPestsInfoNo).then(res => {
        if (res.code === 1) {
          this.likeNumbers = res.data.likesNumber;
          this.thumbUp = true;
        }
      });
    },
    // 获取文章点赞数
    getArticalReads() {
      nowpagereq.getArticalReads(this.diseasesPestsInfoNo).then(res => {
        if (res.code === 1) {
          this.likeNumbers = res.data.likesNumber;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~@/styles/variables.scss";
.cardlist {
  display: flex;
  width: 100%;
  height: calc(100% - 60px);
  flex-wrap: wrap;
  overflow-y: auto;
  align-content: flex-start;
  justify-content: flex-start;
  border-radius: 5px 5px 5px 5px;
  opacity: 1;
  background: #0a404c;
  // border: 1px solid #005e6a;
  .card {
    width: 100%;
    // margin-left: 2%;
    // margin-right: 2%;
    margin-bottom: 15px;
    position: relative;
    height: 160px;
    padding: 10px;
    box-shadow: inset 0 0 20px #065766;
    background-position: center;
    // background-image: url("~@/assets/pest-knowledge/pest1.png");
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: 85% 90%;
    padding-bottom: 20px;
    border-top: 5px solid #05EBDB;
    // border-bottom: 1px dashed #0092a5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    // &:hover {
    //   border: 1px solid #0092a5;
    //   box-shadow: 0 0 10px 0 #0092a5;
    // }
    // &:last-child{
    // border-bottom: 0px solid #0092A5;
    // }
    .ql-editor {
      overflow: hidden;
      height: 90px;
      padding: 5px 21px;
      cursor: pointer;
      background-color: #065766;
      .editorContent {
        height: 40px;
        text-overflow: ellipsis;
        overflow: hidden;
        margin-bottom: 6px;
      }
      .info {
        color: #05EBDB;
        font-size: 12px;
        &>span {
          margin-right: 15px;
        }
      }
    }
    .card-pest {
      margin-top: 25%;
      width: 100%;
      font-weight: 500;
      text-align: center;
      white-space: nowrap;
    }
    .card-title {
      position: relative;
      top: 1%;
      width: 100%;
      font-weight: 500;
      text-align: start;
      font-size: 20px;
      font-weight: 400;
      white-space: nowrap;
      color: #57ffec;
      margin-bottom: 10px;

      span, img {
        vertical-align: middle;
      }
    }
    .zhcheckbox {
      position: relative;
      left: 10%;
      top: 6%;
    }
    .card-date {
      position: absolute;
      top: 10px;
      right: 10px;
      text-align: center;
      font-size: 10px;
      white-space: nowrap;
      color: #76beb6;
      // font-weight: 600;
    }
  }
  .cardselect {
    border: #00c29b 2px solid;
  }
}
.zhform {
  width: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  height: 60px;
  align-items: center;
  justify-content: center;
  // background-color: turquoise;
  // border-left: 1px dashed $borderColor;
  // padding-left: 30px;
  ::v-deep {
    .el-form {
      justify-content: flex-start !important;
    }
  }
  .toback {
    // width: 100%;
    height: 32px;
    margin-bottom: 10px;
    line-height: 40px;
    // display: flex;
    // flex-direction: row-reverse;
    // position: absolute;
    // right: 5px;
    // top: 5px;

    .edit-btns:hover {
      background-color: #ee8b28;
      color: #fff;
      border-color: #fff;
    }
    // justify-content: center;
    align-items: center;
  }
  .el-form {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
  }
  ::v-deep .el-form-item {
    width: 48%;
  }
  ::v-deep .el-form-item__content {
    display: flex;
    // align-items: left;
    // text-align: left;
  }
  ::v-deep .el-form-item__label {
    margin-left: 10px;
    min-width: 40px;
    text-align: left;
  }
}
.zhforms {
  width: 100%;
  padding: 10px 10px;
  // overflow-y: auto;
  display: flex;
  flex-direction: column;
  // height: 60px;
  align-items: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  position: relative;
  padding-bottom: 80px;
  // background-color: turquoise;
  // border-left: 1px dashed $borderColor;
  // padding-left: 30px;
  .zhforms-title {
    box-sizing: border-box;
    padding: 5px 10px;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 10px;
    img, span {
      vertical-align: middle;
    }
  }
  .zhforms-ads {
    // width: 100%;
    padding: 3px 10px;
  }
  .zhforms-input {
    width: 100%;
    padding: 10px 10px 50px 10px;
    ::v-deep {
      .el-textarea {
        border-radius: 10px;
        margin-bottom: 10px;
        .el-textarea__inner {
          border-radius: 5px;
          min-height: 100px !important;
          height: 100%;
          width: 100%;
        }
      }
    }
    position: relative;
  }
  .zhforms-list {
    width: 100%;
    // background: #0a404c;
    margin-bottom: 10px;
    padding: 10px 10px;
    // border: 1px solid #0092a5;
    border-bottom: 1px dashed #0092a5;
    // border-radius: 5px;
    .zhforms-name {
      color: #57ffec;
      font-size: 20px;
      font-weight: 400;
      padding: 10px 10px;
    }
    .zhforms-list-box {
      transition: 1s linear;
      background: #003947;
      border: 1px solid #0092a530;
      border-radius: 5px;
      padding: 10px 10px;
      .zhforms-list {
        border: 1px solid #0092a557;
      }
      .zhforms-name {
        color: #57ffec;
        font-size: 16px;
        font-weight: 400;
        padding: 10px 10px;
      }
    }
    .zhforms-content {
      font-size: 16px;
      font-weight: 400;
      padding: 10px 10px;
      > span {
        color: #57ffec;
      }
    }
  }
  .el-form {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
  }
  ::v-deep .el-form-item {
    width: 48%;
  }
  ::v-deep .el-form-item__content {
    display: flex;
    // align-items: left;
    // text-align: left;
  }
  ::v-deep .el-form-item__label {
    margin-left: 10px;
    min-width: 40px;
    text-align: left;
  }
}
.pagination {
  bottom: 20px;
  right: 20px;
}
::v-deep.el-checkbox {
  .el-checkbox__input .el-checkbox__inner {
    background-color: transparent;
  }
  .el-checkbox__inner::after {
    border: 1px solid #68c729;
    border-top: none;
    border-left: none;
  }
}
.toback {
  z-index: 101;
  // width: 100%;
  height: 40px;
  margin-bottom: 10px;
  line-height: 40px;
  display: flex;
  flex-direction: row-reverse;
  position: absolute;
  right: 28px;
  top: 10px;

  img {
    width: 20px;
    vertical-align: sub;
  }

  .edit-btns:hover {
    background-color: #ee8b28;
    color: #fff;
    border-color: #fff;
  }
  // justify-content: center;
  align-items: center;
}
.table-btns {
  position: absolute;
  right: 5px;
  bottom: 10px;
  border: none;
}
.edit-btns {
  padding: 0;
}
//----富文本-----
::v-deep.quill-editor {
  // width: 800px;
  width: 96%;
  // height: calc(100% - 10px);
  height: 100%;
  // stroke: $appMainTextColor;
  // 隐藏视频按钮
  .ql-video {
    display: none;
  }
  .ql-snow .ql-stroke {
    fill: none;
    stroke: $appMainTextColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }
  .ql-blank::before {
    color: #409eff;
  }
  // .ql-snow .ql-picker-options {
  //   background-color: $menuBg;}
  .ql-snow .ql-picker {
    color: $appMainTextColor;
  }
  .ql-toolbar.ql-snow {
    border: 1px solid #82e5ff;
  }
  .ql-container.ql-snow {
    border: 1px solid #82e5ff;
  }
  .ql-snow {
    position: relative;
  }
  .ql-selected {
    color: rgb(221, 117, 19);
  }
  .ql-fill {
    fill: $appMainTextColor;
  }
}
.ql-container {
  height: calc(100% - 120px) !important;
  border: 1px solid #57acc2 !important;
  position: relative;
  margin: 0 20px;

  .ql-title {
    display: inline-block;
    padding: 6px 30px;
    height: 40px;
    border: 2px solid #00FCF6;
    font-size: 20px;
    position: absolute;
    top: -20px;
    left: 50%;
    background-color: #003947;
    transform: translate(-50%, 0);
  }

  .ql-editor {
    margin: 30px 0 50px;
    height: calc(100% - 100px);
  }

  .handlesanlian {
    display: flex;
    z-index: 100;
    padding: 10px 20px;
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 100%;
    .user {
      padding-top: 10px;
      .info {
        color: #05EBDB;
        font-size: 12px;
        margin-bottom: 6px;
        &:last-child {
          margin-bottom: 0;
        }
        &>span {
          margin-right: 15px;
        }
      }
    }
    .right {
      position: absolute;
      right: 25px;
      bottom: 15px;
      .readNumber {
        display: inline-block;
        text-align: center;
        margin-right: 20px;
      }
      .dianzan {
        display: inline-block;
        text-align: center;
        .disabled {
          pointer-events: none;
          cursor: default;
        }
        .zktddianzan {
          cursor: pointer;
        }
        .zktddianzan_kuai {
          color: red;
        }
      }
    }
    .iconfont {
      font-size: 25px;
    }
  }
}
</style>
